import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import Alert from "components/Alert";

<Meta title="Components/Alert" component={Alert} />

# Alert

Alert is used to highlight a message to user.

## Props
<Props of={Alert} />

## Examples

Baisc usages of Alert. Using type to specify styles.

<Preview>
  <Story name="basic alerts">
    <div>
      <Alert message="Kubesphere.io is an upstream project of the KubeSphere container management platform. " />
      <br />
      <Alert
        type="warning"
        message="Kubesphere.io is an upstream project of the KubeSphere container management platform. "
      />
      <br />
      <Alert
        type="error"
        message="Kubesphere.io is an upstream project of the KubeSphere container management platform. "
      />
      <br />
      <Alert
        type="info"
        message="Kubesphere.io is an upstream project of the KubeSphere container management platform. "
      />
    </div>
  </Story>
</Preview>

Passing a title to Alert.

<Preview>
  <Story name="alerts title">
    <div>
      <Alert title="KubeSphere" message="Kubesphere.io is an upstream project of the KubeSphere container management platform. " />
      <br />
      <Alert
        type="warning"
        title="KubeSphere"
        message="Kubesphere.io is an upstream project of the KubeSphere container management platform. "
      />
      <br />
      <Alert
        type="error"
        title="KubeSphere"
        message="Kubesphere.io is an upstream project of the KubeSphere container management platform. "
      />
      <br />
      <Alert
        type="info"
        title="KubeSphere"
        message="Kubesphere.io is an upstream project of the KubeSphere container management platform. "
      />
    </div>
  </Story>
</Preview>
